<template>
	<view class="bg">
		<view class="bj">
			<view class="nav">
				<view class="left1">
					<image class="img" src="@/static/image/default.png" mode=""></image>
					<text class="username">用户名154331</text>
				</view>
				<view class="right1">
					<view class="butn">
						<image class="img" src="../static/inoc_qd_ybqd@2x.png" mode=""></image>
						<text>1210金币</text>
					</view>
				</view>
			</view>
		</view>
		<view class="banner">
			<view class="d">
				<view class="date">
					<text>{{thistime.day}}</text>
					<view class="da1">
						<text>{{thistime.weekend}}</text>
						<text>\n{{thistime.month}}</text>
						<text>{{thistime.year}}</text>
					</view>
				</view>
				<image class="imgman" src="../static/renwu@2x.png" mode=""></image>
			</view>

			<view class="week">
				<siginIn></siginIn>
			</view>
		</view>
		
		
		<view class="end">
			<view class="box2" v-for="item in img" :key="item._id">
				<text class="t1">{{item.name}}</text>
				<text class="t2">\n{{item.dec}}</text>
				<image :src="'../static/'+item.img" class="img1" mode=""></image>
			</view>
		</view>
	</view>
</template>

<script>
	import siginIn from '@/components/fanxiao-sign/sigin-in.vue';
	export default {
		components: {
			siginIn
		},
		onLoad() {
			this.gettime()
		},
		data() {
			return {
				
				img:[
					{
						_id:1,
						name:"显示抽奖",
						dec:"每天现实抽手机",
						img:'picture_qiandao_xianshichoujiang.png'
					}	,{
						_id:2,
						name:"显示抽奖",
						dec:"每天现实抽手机",
						img:'picture_qiandao_dazhuanpan.png'
					}	,{
						_id:3,
						name:"显示抽奖",
						dec:"每天现实抽手机",
						img:'picture_qiandao_zouluzhuanjingbi.png'
					}	,{
						_id:4,
						name:"显示抽奖",
						dec:"每天现实抽手机",
						img:'picture_qiandao_jinbihuanli.png'
					}
				],
				thistime:{
					weekend :"",
					month:"",
					day:"",
					year:""
				}
			};
		},
		methods: {
			getsigin(e) {
				console.log('已点击签到------');
			},
			// 获取当前时间
			gettime(){
					var myDate = new Date();
					     this.thistime.year = myDate.getFullYear();//获取年
					     this.thistime.month = myDate.getMonth();
					     this.thistime.day = myDate.getDate();//获取日
					    this.thistime.weekend = myDate.getDay(); 
					    var weeks = new Array("周日", "星周", "周二", "周三", "周四", "周五", "周六");
						var month = ["一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月"]
					    this.thistime.weekend= weeks[this.thistime.weekend]
						this.thistime.month= month[this.thistime.month]
					　　//这些if判断是在小于10的时候前面自动补0				   
					    if (this.thistime.day<10) {
					       this.thistime.day = '0'+this.thistime.day
					    }	
			}
			
		}
	}
</script>

<style scoped lang="scss">
	.bg {
		background-color: #F8F7F7;
	}

	.bj {
		background-image: linear-gradient(to bottom, #2A8FFE, #F8F7F7);
		overflow: hidden;
		height: 400rpx;

		.nav {
			display: flex;
			margin-top: 56rpx;
			justify-content: space-between;

			width: 790rpx;
			padding: 0rpx 40rpx;

			.left1 {

				.username {
					font-size: 40rpx;
					font-weight: normal;
					font-stretch: normal;
					line-height: 56rpx;
					letter-spacing: 0rpx;
					color: #ffffff;
					margin-left: 24rpx;
				}

				.img {
					width: 88rpx;
					height: 88rpx;
					vertical-align: middle;
				}

			}

			.right1 {
				margin-top: 30rpx;
				width: 146rpx;
				height: 40rpx;
				background-color: #9187f2;
				border-radius: 20rpx 0rpx 0rpx 20rpx;
				text-align: center;
				font-size: 20rpx;
				font-weight: normal;
				font-stretch: normal;
				line-height: 28rpx;
				letter-spacing: 0rpx;
				color: #ffffff;

				.butn {
					.img {
						width: 28rpx;
						height: 28rpx;
						margin-top: 10rpx;
						vertical-align: bottom;
						
					}
				}
			}
		}
	}

	.banner {
		width: 670rpx;
		height: 512rpx;
		background-color: #ffffff;
		border-radius: 12rpx;
		margin: 0 auto;
		margin-top: -200rpx;
		padding: 48rpx;
		box-sizing: border-box;

		.d {
			display: flex;

			.date {
				display: flex;

				font-family: DIN;
				font-size: 100rpx;
				font-weight: normal;
				font-stretch: normal;
				line-height: 120rpx;
				letter-spacing: 0rpx;
				color: #323232;

				.da1 {
					font-family: PingFang SC;
					font-size: 32rpx;
					font-weight: normal;
					font-stretch: normal;
					line-height: 44rpx;
					letter-spacing: 0rpx;
					color: #474747;
					margin-left: 20rpx;
					margin-top: 20rpx;



				}
			}

			.imgman {
				position: absolute;
				top: 90rpx;
				    right: -76rpx;
				width: 1000rpx;
				height: 300rpx;
			}
		}
	}
	
	.end{
		box-sizing: border-box;
		padding: 40rpx;
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		.box2{
			width: 324rpx;
				height: 294rpx;
				background-color: #ffffff;
				border-radius: 12rpx;
				box-sizing: border-box;
				padding: 24rpx;
				margin-top: 24rpx
				;
				.t1{
					width: 128rpx;
						height: 44rpx;
						font-family: PingFang SC;
						font-size: 32rpx;
						font-weight: normal;
						font-stretch: normal;
						line-height: 44rpx;
						letter-spacing: 0rpx;
						color: #323232;
						// text-align: center;
				}
				.t2{
						width: 168rpx;
						height: 34rpx;
						font-family: PingFang SC;
						font-size: 24rpx;
						font-weight: normal;
						font-stretch: normal;
						line-height: 34rpx;
						letter-spacing: 0rpx;
						color: #d1d1d1;
				}
				.img1{
					width: 276rpx;
						height: 134rpx;
						margin-top: 30rpx;
				}
		}
	}
</style>
